<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义分类</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <style>
        .layui-layer-page .layui-layer-content{
            overflow: inherit!important;
        }
        .style_box .layui-w130{
            width: 130px;
        }
        .style_box .layui-mt10{
            margin-top: 10px;
        }
        .table-list table tbody td:first-child,.table-list table thead th:first-child{
            text-align: left;
            width: 50%;
            padding-left: 20px;
        }
        .table-list table tbody td.s_child{
            padding-left: 40px;
        }
        .table-list table tbody td.t_child{
            padding-left: 60px;
        }
    </style>
</head>
<body>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=1&y=4" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form">
        <div class="friend-tips">
            <div class="title-box"><i class="icon-sty"></i><b class="title-tip">温馨提示</b></div>
            <div class="info-list">此处为管理你的产品自定义分类，可增加、删除、重命名、及分类排序等操作</div>
        </div>
        <div class="content-admin">

            <div class="title-toggle">
                <div class="item active">产品自定义分类</div>
            </div>
            <div class="search-box clearfix">
                <div class="fl"><span class="btn-sty22" onclick="addClass()">添加分类</span></div>
                <div class="fr js-inputbox1">
                    <span>是否在网站中展开自定义分类：</span>
                    <input type="radio" name="type" title="是" lay-skin="primary" value="0">
                    <input type="radio" name="type" title="否" lay-skin="primary" value="1">
                    <span class="btn-sty11 js-openHide">确定</span>
                </div>
            </div>
            <div>
                <div class="table-list">
                    <table>
                        <thead>
                        <tr>
                            <th>分类名称</th>
                            <!--<th>排序</th>-->
                            <th>添加子类</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody v-for="(items,indexs) in list">
                        <tr>
                            <td>{{items.name}}</td>
                            <!--<td>-->
                                <!--<span :class="'icon_up ' + (indexs>0?'active':'')" title="上移" @click="toUp(indexs,items.id)"></span>-->
                                <!--<span :class="'icon_down ' + checkIcon(indexs,list.length)" title="下移" @click="toDown(indexs,items.id,list.length)"></span>-->
                            <!--</td>-->
                            <td class="col-sty1"><span class="icon_addchild" @click="addChildclass(items.name,items.id)"></span></td>
                            <td>
                                <span class="colo-blue cur-p mr-15" @click="editclass(items.name,items.id)">修改</span>
                                <span class="colo-blue cur-p" @click="deleteclass(items.id)">删除</span>
                            </td>
                        </tr>
                        <tr v-for="(item,index) in items.subordinate">
                            <td class="s_child">{{item.name}}</td>
                            <!--<td>-->
                                <!--<span :class="'icon_up ' + (index>0?'active':'')" title="上移" @click="toUp(index,item.id)"></span>-->
                                <!--<span :class="'icon_down ' + checkIcon(index,items.subordinate.length)" title="下移" @click="toDown(index,item.id,items.subordinate.length)"></span>-->
                            <!--</td>-->
                            <td class="col-sty1"></td>
                            <td>
                                <span class="colo-blue cur-p mr-15" @click="editclass(item.name,item.id)">修改</span>
                                <span class="colo-blue cur-p" @click="deleteclass(item.id)">删除</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="addbox" style="display: none">
        <div id="" class="layui-layer-content">
            <form class="layui-form layui-shide layui-layer-wrap" id="add_class" lay-filter="add_class" style="display: block;">
                <div class="layui-form-item layui-mt10">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-w130">一级分类：</label>
                        <div class="layui-input-inline">
                            <select id="parent_class" lay-filter="parent_class" >
                                <option value="">请选择一级分类</option>
                                <option :value="item.id" v-for="item in list">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label layui-w130">分类名称：</label>
                        <div class="layui-input-inline">
                            <input type="text" id="addclassname" placeholder="请输入分类名称" class="layui-input layui-w250">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script>
    var storeId = localStorage.getItem("storeId");
    var app = new Vue({
        el: '.content-box',
        data: {
            list:[],
            pId:""
        },
        mounted: function () {
            initList();
        },
        updated: function () {

        },
        methods: {
            addChildclass:function (name,id) {
                this.pId = id;
                layui.use(['layer','form'], function () {
                    var form = layui.form;
                    layer.open({
                        type: 1,
                        title: "添加子类",
                        closeBtn: 2,
                        shadeClose: true,
                        skin: 'add_child style_box',
                        content: '<div id="" class="layui-layer-content ">'+
                        '<form class="layui-form layui-shide layui-layer-wrap" id="add_class" lay-filter="add_class" style="display: block;">'+
                        '<div class="layui-form-item layui-mt10">'+
                        '<div class="layui-inline">'+
                        '<label class="layui-form-label layui-w130">一级分类：</label>'+
                        '<div class="layui-input-inline"><input type="text" placeholder="请输入分类名称" style="border: none" readonly class="layui-input layui-w250" value="'+ name +'"></label>'+
                        '</div>'+
                        '</div>'+
                        '<div class="layui-inline">'+
                        '<label class="layui-form-label layui-w130">分类名称：</label>'+
                        '<div class="layui-input-inline">'+
                        '<input type="text" id="addclassname" placeholder="请输入分类名称" class="layui-input layui-w250">'+
                        '</div>'+
                        '</div>'+
                        '</div>'+
                        '</form>'+
                        '</div>' + btnBox
                    });
                    form.render()
                })
            },
            editclass:function (name,id) {
                this.pId = id;
                layui.use(['layer','form'], function () {
                    var form = layui.form;
                    layer.open({
                        type: 1,
                        title: "修改分类名称",
                        closeBtn: 2,
                        shadeClose: true,
                        skin: 'edit_child style_box',
                        content: '<div id="" class="layui-layer-content ">'+
                        '<form class="layui-form layui-shide layui-layer-wrap" id="add_class" lay-filter="add_class" style="display: block;">'+
                        '<div class="layui-form-item layui-mt10">'+
                        '<div class="layui-inline">'+
                        '<label class="layui-form-label layui-w130">分类名称：</label>'+
                        '<div class="layui-input-inline">'+
                        '<input type="text" id="addclassname" placeholder="请输入分类名称" class="layui-input layui-w250" value="'+ name +'">'+
                        '</div>'+
                        '</div>'+
                        '</div>'+
                        '</form>'+
                        '</div>' + btnBox
                    });
                    form.render()
                })
            },
            deleteclass:function(id){
                get_confirm("确认删除该分类？",function () {
                    get_ajax("/sys/customType/delById",{id:id},function (data) {
                        layer.msg("删除成功！");
                        initList()
                    })
                })
            },
            checkIcon:function (index,length) {
                if(index == length - 1){
                    return ""
                }else{
                    return "active"
                }

            },
            toUp:function (index,id) {
                if(index > 0){
                    var sendData = {
                        id:id,
                        sort:index-1,
                    }
                    get_ajax("/sys/customType/editSort",sendData,function (data) {
                        layer.msg("保存排序成功！");
                        initList()
                    })
                }
            },
            toDown:function (index,id,length) {
                if(index < (length - 1)){
                    var sendData = {
                        id:id,
                        sort:index+1,
                    }
                    get_ajax("/sys/customType/editSort",sendData,function (data) {
                        layer.msg("保存排序成功！");
                        initList()
                    })
                }
            }
        }
    });
    layui.use(['form'], function () {
        var form = layui.form;
        form.render()
    })
    var btnBox = '<div class="layui-layer-btn layui-layer-btn-"><a class="layui-layer-btn0">确定</a><a class="layui-layer-btn1">取消</a></div>';
    function addClass() {
        layui.use(['layer','form'], function () {
            var form = layui.form;
            layer.open({
                type: 1,
                title: "添加分类",
                closeBtn: 2,
                shadeClose: true,
                skin: 'add_box_show style_box',
                content: $(".addbox").html() + btnBox
            });
            form.render()
        })
    }



    $("body").on("click",".add_child .layui-layer-btn0",function () {
        var pId = app.pId;
        var name = $(".add_child #addclassname").val();
        if(!name){return}
        get_ajax("/sys/customType/addCustomType",{pId:pId,name:name},function (data) {
            layer.msg("添加成功！");
            initList()
        })
    })

    $("body").on("click",".add_box_show .layui-layer-btn0",function () {
        var pId = $(".add_box_show #parent_class").val();
        var name = $(".add_box_show #addclassname").val();
        var sort;
        if(!pId){
            sort = app.list.length;
        }else{

        }
        if(!name){return}
        get_ajax("/sys/customType/addCustomType",{pId:pId,name:name,sort:sort},function (data) {
            layer.msg("新增分类成功！");
            initList()
        })
    })

    $("body").on("click",".edit_child .layui-layer-btn0",function () {
        var pId = app.pId;
        var name = $(".edit_child #addclassname").val();
        if(!name){return}
        get_ajax("/sys/customType/editCustomType",{id:pId,name:name},function (data) {
            layer.msg("修改成功！");
            initList()
        })
    })

    function initList() {
        get_ajax("/sys/customType/getAllList",{storeId:storeId},function (data) {
            app.list = data;
        })
    }


    get_ajax("/sys/store/view",{id:storeId},function (data) {
        $('.js-inputbox1').find('input').each(function(){
            if(data.showTree==$(this).val()){
                $(this).prop('checked',true)
            }
            layui.use(['form'], function () {
                var form = layui.form;
                form.render("radio");
            })
        })
    })

    $('.js-openHide').click(function(){
        get_ajax("/sys/store/addInfo",{showTree:$('.js-inputbox1').find('input:checked').val()},function (data) {
            layer.msg("设置成功！");
        })
    })
</script>
</body>
</html>